<template>
	<view class="content">
		<view class="main" v-if="!isCommitment">
			<view class="typeBox">
				<text class="typeLine"></text>
				<text class="typeLabel">社群基本信息</text>
			</view>
			<!-- 头像上传 -->
			<image :src="avatar || (baseurl+'associationAdd/avatar.png')" class="avatar" @click="chooseImage('avatar')">
			</image>
			<text class="avatarLabel">头像(建议宽高比例为1:1)</text>
			<view class="inputItem">
				<text class="inputlabel">名 称：</text>
				<input type="text" placeholder="请输入社群名称" class="input" v-model="name" />
			</view>
			<view class="inputItem">
				<text class="inputlabel">社群说明：</text>
				<input type="text" placeholder="请输入社群说明" class="input" v-model="proposal" />
			</view>
			<view class="inputItem">
				<text class="inputlabel">加入条件：</text>
				<input type="text" placeholder="请输入加入条件" class="input" v-model="joinCondition" />
			</view>
			<view class="inputItem">
				<text class="inputlabel">所属分类：</text>
				<!-- <input type="text" placeholder="请输入加入条件" class="input" v-model="joinCondition" /> -->
				<uni-data-select :clear="false" v-model="type" :localdata="typeArr"></uni-data-select>
			</view>
			<view class="typeBox" style="margin-bottom: 85rpx;">
				<text class="typeLine"></text>
				<text class="typeLabel">主理人信息</text>
			</view>
			<view class="inputItem">
				<text class="inputlabel">姓 名：</text>
				<input type="text" placeholder="请输入主理人姓名" class="input" v-model="managerName" />
			</view>
			<view class="inputItem">
				<text class="inputlabel">性 别：</text>
				<uni-data-select :clear="false" v-model="sex" :localdata="sexArr"></uni-data-select>
			</view>
			<view class="inputItem">
				<text class="inputlabel">年 龄：</text>
				<input type="text" placeholder="请输入主理人年龄" class="input" v-model="managerAge" />
			</view>
			<view class="inputItem">
				<text class="inputlabel">联系方式：</text>
				<input type="text" placeholder="请输入主理人电话号码" class="input" v-model="managerPhone" maxlength="11" />
			</view>
			<!-- 身份证正面上传 -->
			<view class="inputItem" @click="chooseImage('front')">
				<text class="inputlabel">主理人身份证照片：</text>
				<view class="idcardBox">
					<view class="idcardAdd" v-if="!front">
						+
					</view>
					<text class="idcaradLabel">身份证正面照</text>
					<image :src="front" v-if="front" class="idcard"></image>
				</view>
			</view>
			<!-- 身份证反面上传 -->
			<view class="inputItem" @click="chooseImage('back')">
				<view class="idcardBox">
					<view class="idcardAdd" v-if="!back">
						+
					</view>
					<text class="idcaradLabel">身份证反面照</text>
					<image :src="back" v-if="back" class="idcard"></image>
				</view>
			</view>
			<view class="inputItem">
				<text class="inputlabel">社员信息（非必填）：</text>
				<view class="memberBox">
					<!-- 循环展示所有社员 -->
					<view class="memberItem" v-for="(item, index) in member" :key="index">
						<text class="memberName">{{ item.name }}</text>
						<text class="memberPhone">{{ item.mobile }}</text>
						<image :src="baseurl+'associationAdd/delete.png'" class="delete" @click="deleteMember(index)">
						</image>
					</view>
					<!-- 当没有社员时显示提示文字 -->
					<view class="noMember" v-if="member.length === 0">
						暂无社员信息，点击下方按钮添加
					</view>
					<!-- 添加社员按钮 -->
					<view class="memberAdd" @click="isAdd=!isAdd">
						+
					</view>
				</view>
			</view>
			<view class="submit" @click="submit">
				提交
			</view>
			<!-- 增加社员弹窗 -->
			<view class="addBox" v-if="isAdd">
				<view class="addInner">
					<view class="addTopBox">
						<text class="addTitle">新增社员</text>
						<image :src="baseurl+'associationAdd/3.png'" class="close" @click="resetMemberForm"></image>
					</view>
					<view class="inputItem">
						<text class="inputlabel">姓 名：</text>
						<input type="text" placeholder="请输入社员姓名" class="input" v-model="memberName" />
					</view>
					<view class="inputItem">
						<text class="inputlabel">电 话：</text>
						<input type="text" placeholder="请输入社员电话" class="input" v-model="memberPhone" maxlength="11" />
					</view>
					<view class="submit" style="margin-top: 150rpx;" @click="submitMember">
						确定
					</view>
				</view>
			</view>

		</view>
		<!-- 承诺书 -->
		<view class="commitmentBox" v-else>
			<view class="commitmentTitleBox">
				《主理人承诺书》
			</view>
			<view class="mpHtml">
				<view class="titleBox">
					  本人作为<text class="title">【{{name}}】</text> 的主理人（以下简称“本社群”），为规范社群运营行为、维护绵投置地品牌形象及社会公共利益，现郑重承诺如下：
				</view>
				<mp-html :content="content" />
			</view>
			<view class="agreeBox" @click="agree">
				<image :src="baseurl+agreeUrl" class="agree"></image>
				<text class="agreeText1">我已阅读并同意</text>
				<text class="agreeText2">《入群要求及协议》</text>
			</view>
			<view class="submit1" @click="submit1">
				提交
			</view>
		</view>
		<!-- 结果 -->
		<view class="resultBox" v-if="isResult">
			<view class="success" v-if="isSuccess">
				<image :src="baseurl+'user/success.png'" class="postSuccess"></image>
				<text class="result">提交成功</text>
				<text class="tips">您已提交成功，请耐心等待审核结果！</text>
				<view class="btn" @click="$navto.navto('/packageB/my_association_establish/my_association_establish')">
					查看详情
				</view>
			</view>
			<view class="success" v-if="isFail">
				<image :src="baseurl+'user/fail.png'" class="postFail"></image>
				<text class="result">提交失败</text>
				<text class="tips">很遗憾提交失败，再次提交试试！</text>
				<view class="btn" @click="again">
					再次提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				agreeUrl: 'associationAdd/4.png',
				isAgree: false,
				isCommitment: false,
				isResult: false,
				isSuccess: false,
				isFail: false,
				content: '主理人承诺书',
				// 社群信息
				avatar: '',
				name: '',
				proposal: '',
				joinCondition: '',
				// 主理人信息
				managerName: '',
				sexId: '',
				sex: '',
				sexArr: [{
						value: 1,
						text: '男'
					},
					{
						value: 2,
						text: '女'
					}
				],
				managerAge: '',
				managerPhone: '',

				// 图片相关
				front: '',
				back: '',

				// 社员相关
				isAdd: false,
				member: [], // 存储所有社员信息的数组
				memberName: '', // 新增社员姓名临时存储
				memberPhone: '', // 新增社员电话临时存储
				typeArr: '',
				type: '',
				typeId: '',
				canSubmit: true
			}
		},
		onLoad() {
			// 查询主理人承诺书
			this.$request.get(`Community/community_agreement`).then(res => {
				this.content = res.data.data.content;
			})
			// 查询社群类别
			this.$request.get(`CommunityCategory/community_category_list`).then(res => {
				this.typeArr = res.data.data.map(item => ({
					value: item.id,
					text: item.name
				}));
			})
		},
		methods: {
			again() {
				this.canSubmit = true;
				this.isSuccess = false;
				this.isFail = false;
				this.isResult = false;
			},
			agree() {
				if (this.isAgree == false) {
					this.isAgree = true;
					this.agreeUrl = 'associationAdd/5.png'
				} else {
					this.isAgree = false;
					this.agreeUrl = 'associationAdd/4.png'
				}
			},
			// 图片选择上传
			chooseImage(type) {
				uni.chooseImage({
					count: 1,
					sizeType: ["compressed"],
					sourceType: ["album"],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						const tempFiles = res.tempFiles;
						let resSize = tempFiles[0].size;

						// 上传文件
						uni.uploadFile({
							url: `https://miantou.guguan.net/api/File/formImage`,
							header: {
								"Content-Type": "multipart/form-data",
								"token": JSON.parse(uni.getStorageSync('TOKEN')).value
							},
							filePath: tempFilePaths[0],
							name: "file",
							fileType: "image",
							success: (res) => {
								const {
									data
								} = res;
								let datas = JSON.parse(data);
								const imageUrl = datas.data.uri;

								switch (type) {
									case 'avatar':
										this.avatar = imageUrl;
										break;
									case 'front':
										this.front = imageUrl;
										break;
									case 'back':
										this.back = imageUrl;
										break;
								}
							},
							fail: (res) => {
								this.$toast('上传失败，请重新上传')
							}
						});
					}
				})
			},

			// changeType(e) {
			//   this.typeId = e.detail.value;
			// },
			// changeSex(e) {
			//   this.sexId = e.detail.value;
			// },
			// 提交社员信息
			submitMember() {
				// 简单验证
				if (!this.memberName) {
					return this.$u.toast('请输入社员姓名')
				}
				if (!this.memberPhone || this.memberPhone.length !== 11) {
					return this.$u.toast('请输入正确的11位电话号码')
				}
				// 添加到社员数组
				this.member.push({
					"name": this.memberName,
					"mobile": this.memberPhone
				});
				// 重置表单并关闭弹窗
				this.resetMemberForm();
			},
			// 删除社员
			deleteMember(index) {
				// 从数组中移除对应索引的社员
				this.member.splice(index, 1);
			},
			// 重置社员表单
			resetMemberForm() {
				this.memberName = '';
				this.memberPhone = '';
				this.isAdd = false;
			},
			submit1() {
				if (!this.isAgree) {
					return this.$u.toast('请阅读并同意主理人承诺书')
				}
				if (this.canSubmit) {
					this.$request.post(`community/create_association`, {
						head: this.avatar,
						name: this.name,
						into: this.proposal,
						condition: this.joinCondition,
						category_id: this.type,
						principal_name: this.managerName,
						sex: this.sex,
						age: this.managerAge,
						principal_mobile: this.managerPhone,
						card_r: this.front,
						card_l: this.back,
						member_arr: JSON.stringify(this.member)
					}).then(res => {
						console.log(res.data.data)
						if (res.data.code == 1) {
							this.canSubmit = false;
							this.isSuccess = true;
						} else {
							this.isFail = true;
						}
						this.isResult = true;
					})
				}
			},
			// 提交整体表单
			submit() {
				if (!this.avatar) {
					return this.$u.toast('请上传头像')
				}
				if (!this.name) {
					return this.$u.toast('请输入社群名称')
				}
				if (!this.proposal) {
					return this.$u.toast('请输入社群说明')
				}
				if (!this.joinCondition) {
					return this.$u.toast('请输入加入条件')
				}
				if (!this.type) {
					return this.$u.toast('请选择所属分类')
				}
				if (!this.managerName) {
					return this.$u.toast('请输入主理人姓名')
				}
				if (!this.sex) {
					return this.$u.toast('选择性别')
				}
				if (!this.managerAge) {
					return this.$u.toast('请输入主理人年龄')
				}
				if (!this.managerPhone || this.managerPhone.length !== 11) {
					return this.$u.toast('请输入主理人正确的11位电话号码')
				}
				if (!this.front) {
					return this.$u.toast('请上传身份证正面照')
				}
				if (!this.back) {
					return this.$u.toast('请上传身份证反面照')
				}
				this.isCommitment = true;
			}
		}
	}
</script>

<style lang="scss">
	.resultBox {
		position: absolute;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: #FAFAFA;
		overflow-y: scroll;

		.btn {
			width: 252rpx;
			height: 94rpx;
			line-height: 94rpx;
			text-align: center;
			background-color: #4E97AD;
			border-radius: 47rpx;
			color: #fff;
			margin: 0 auto;
			margin-top: 90rpx;
			font-size: 28rpx;
			font-weight: 500;
		}

		.tips {
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			font-weight: 500;
			margin-top: 35rpx;
			color: #919191;
			display: block;
		}

		.result {
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			font-weight: 700;
			margin-top: 70rpx;
			display: block;

		}

		.postFail {
			width: 152rpx;
			height: 152rpx;
			margin-left: 306rpx;
			margin-top: 414rpx;
		}

		.postSuccess {
			width: 152rpx;
			height: 152rpx;
			margin-left: 306rpx;
			margin-top: 414rpx;
		}
	}

	.commitmentBox {
		position: absolute;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow-y: scroll;
		padding-left: 40rpx;
		padding-right: 40rpx;

		.titleBox {
			margin-bottom: 40rpx;
			 text-indent: 60rpx; 
		}

		.title {
			font-weight: 700;
		}

		.submit1 {
			width: 500rpx;
			height: 100rpx;
			margin-left: 85rpx;
			text-align: center;
			line-height: 100rpx;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-weight: 700;
			background-color: #4e97ad;
			color: #fff;
			margin-top: 85rpx;
			margin-bottom: 125rpx;
		}

		.commitmentTitleBox {
			width: 100%;
			height: 150rpx;
			border-bottom: 1rpx solid #919191;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-weight: 700;
		}
	}

	.agreeBox {
		width: 670rpx;
		display: flex;
		align-items: center;
		margin-left: 40rpx;

		.agreeText2 {
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(78, 151, 173, 1);
		}

		.agreeText1 {
			font-size: 28rpx;
			font-weight: 500;
		}

		.agree {
			width: 35rpx;
			height: 35rpx;
			margin-right: 30rpx;
		}
	}

	.mpHtml {
		width: 670rpx;
		max-height: 900rpx;
		overflow-y: scroll;
		margin-top: 55rpx;
		margin-bottom: 55rpx;
	}

	/* 原有样式保持不变，新增以下样式 */
	.memberBox {

		// 新增无社员时的提示样式
		.noMember {
			text-align: center;
			color: #919191;
			font-size: 28rpx;
			margin-bottom: 30rpx;
			padding: 20rpx 0;
		}
	}

	/* 原有样式 */
	.addBox {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 10;

		.addInner {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 1000rpx;
			max-height: 100%;
			background-color: #EDF6FA;
			border-radius: 50rpx 50rpx 0 0;

			.addTopBox {
				position: relative;
				width: 100%;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #c8c8c8;
				padding-top: 40rpx;
				padding-bottom: 40rpx;
				box-sizing: border-box;
				margin-bottom: 75rpx;

				.addTitle {
					width: 100%;
					text-align: center;
					font-size: 32rpx;
					font-weight: 700;
				}

				.close {
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					right: 40rpx;
				}
			}
		}
	}

	.submit {
		width: 500rpx;
		height: 100rpx;
		margin-left: 125rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-weight: 700;
		background-color: #4e97ad;
		color: #fff;
		margin-top: 85rpx;
		margin-bottom: 125rpx;
	}

	.uni-select {
		height: 40px !important;
		margin-top: 23rpx !important;
		border-radius: 15rpx !important;
		padding-left: 55rpx;
		background-color: #fff;
		border: none !important;
	}

	.uni-select__input-box {
		padding-left: 15px !important;
	}

	.inputItem {
		position: relative;
		width: 670rpx;
		margin-left: 40rpx;
		margin-bottom: 40rpx;

		.memberBox {
			width: 670rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 40rpx;
			padding: 50rpx 40rpx 50rpx 40rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;

			.memberItem {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #919191;
				margin-bottom: 40rpx;

				.memberPhone {
					font-size: 30rpx;
					font-weight: 500;
				}

				.memberName {
					font-size: 30rpx;
					font-weight: 500;
				}

				.delete {
					width: 30rpx;
					height: 34rpx;
				}
			}

			.memberAdd {
				width: 66rpx;
				height: 66rpx;
				border-radius: 50%;
				border: 1rpx solid #919191;
				color: #919191;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 40rpx;
				margin-left: 252rpx;
			}
		}

		.idcardBox {
			position: relative;
			width: 670rpx;
			height: 390rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.idcard {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 10;
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}

			.idcaradLabel {
				color: #919191;
				font-size: 24rpx;
				font-weight: 500;
				margin-top: 35rpx;
			}

			.idcardAdd {
				width: 66rpx;
				height: 66rpx;
				border-radius: 50%;
				border: 1rpx solid #919191;
				color: #919191;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 40rpx;
			}
		}

		.inputlabel {
			font-size: 28rpx;
			font-weight: 500;
		}

		.input {
			width: 615rpx;
			height: 80rpx;
			background-color: #fff;
			border-radius: 15rpx;
			margin-top: 35rpx;
			padding-left: 55rpx;
		}
	}

	.avatarLabel {
		width: 100%;
		text-align: center;
		margin-top: 30rpx;
		margin-bottom: 50rpx;
		font-size: 28rpx;
		font-weight: 500;
		display: block;
	}

	.avatar {
		width: 136rpx;
		height: 136rpx;
		margin-left: 307rpx;
		margin-top: 55rpx;
		border-radius: 50%;
	}

	.typeBox {
		display: flex;
		align-items: center;
		margin-top: 70rpx;

		.typeLabel {
			font-size: 30rpx;
			font-weight: 700;
			margin-left: 35rpx;
		}

		.typeLine {
			width: 6rpx;
			height: 24rpx;
			background: #73A7B7;
		}
	}

	.content {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		background-color: #edf6fa;
	}
</style>